<template>
	<view>
		<view class="top_box">
			<view class="top_box_img">
				<image src="../../static/my/my_back_pad.png" mode="aspectFill" v-if="isPad==1"></image>
				<image src="../../static/my/my_back.png" mode="aspectFill" v-if="isPad==0"></image>
				<view class="top_box_img_text">
					<view class="setup d-e-c" @click="goPage('/pages/user/setup/setup')">
						<u-icon name="setting" color="#ffffff" size="40"></u-icon>
					</view>
					<view class="info d-b-c">
						<view class="d-s-c">
							<view class="top_box_img_text_atar">
								<image src="../../static/avatar.png" mode="" v-if="isAvatar(userInfo.avatar)"></image>
								<image :src="`${imgUrl}${userInfo.avatar}`" mode="" v-else></image>
							</view>
							<view class="ml30">
								<view class="white f32 fb mb23">{{ userInfo.nickname }}</view>
								<view class="top_num">{{ userInfo.mobile }}</view>
							</view>
						</view>
						<view class="" @click="goPage('/pages/myhome/myinfo')">
							<u-icon name="arrow-right" color="#ffffff" size="30"></u-icon>
						</view>
					</view>
					<view class="d-b-c top_box_img_text_but">
						<view class="">
							<view class="tc f50 fb white">{{ todayStudyNum }}</view>
							<view class="top_num f26">今日识词</view>
						</view>
						<view class="top_box_img_text_lin"></view>
						<view class="">
							<view class="tc f50 fb white">{{ todayReviewNum }}</view>
							<view class="top_num f26">今日待复习</view>
						</view>
						<view class="top_box_img_text_lin"></view>
						<view class="">
							<view class="tc f50 fb white">{{ totalStudyNum }}</view>
							<view class="top_num f26">累计学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="con">
			<view class="con_box">
				<view class="con_box_item d-b-c" v-for="(item, index) in list" :key="index" @click="goPage(item.url)">
					<view class="d-s-c">
						<view class="con_box_item_img mr30">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="ml20 mr20">
							<view class="f30 gray3 mb16">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="con_box_item_but">
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPad: getApp().globalData.isPad,
				imgUrl: getApp().globalData.imgUrl,
				todayStudyNum: 0,
				todayReviewNum: 0,
				totalStudyNum: 0,
				list: [
					{
						img: "../../static/my/my_icon1.png",
						name: '个人信息',
						url: '/pages/user/profile/profile'
					},
					{
						img: "../../static/my/my_icon3.png",
						name: '生词本',
						url: '/pages/user/newWord/newWord'
					},
					{
						img: "../../static/index/word_icn.png",
						name: '不背单词',
						url: '/pages/user/notStudy/notStudy'
					},
					// {
					// 	img: "../../static/my/my_icon4.png",
					// 	name: '词汇检测',
					// 	url: '/pages/user/exam/word'
					// },
					{
						img: "../../static/index/review_icn.png",
						name: '词汇检测记录',
						url: '/pages/user/exam/record'
					},
					// {
					// 	img: "../../static/my/my_icon2.png",
					// 	name: '我的课程',
					// 	url: ''
					// },
					// {
					// 	img: "../../static/index/forget_icn.png",
					// 	name: '复习记录',
					// 	url: '/pages/study/review21/record'
					// },
					// {
					// 	img: "../../static/my/my_icon5.png",
					// 	name: '学习记录',
					// 	url: '/pages/study/record'
					// },
					{
						img: "../../static/my/my_icon6.png",
						name: '退出账号',
						url: 'logout'
					},
				],
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			isAvatar(avatar) {
				return (avatar) => {
					if (avatar.includes('data:image')) {
						return true
					} else {
						return false
					}
				}
			}
		},
		onLoad() {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				this.getStudyStatistics()
			}
		},
		methods: {
			getStudyStatistics() {
				this.$u.get(this.$u.api.studyStatistics).then((res) => {
					this.todayStudyNum = res.data.today_study_num
					this.todayReviewNum = res.data.today_review_num
					this.totalStudyNum = res.data.total_study_num
				}).catch((err) => {
					console.log(err)
				})
			},
			// 退出登录
			logout() {
				let that = this
				uni.showModal({
					title: '退出登录',
					content: '您确定退出当前账号吗？',
					showCancel: true,
					confirmColor: '#387BEF',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在退出...'
							})
							that.$u.post(that.$u.api.logout, {}).then((res) => {
								uni.hideLoading()
								that.$store.dispatch('userLogout')
								uni.$u.toast('退出成功')
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1500)
							}).catch((err) => {
								uni.hideLoading()
								console.log(err)
								uni.$u.toast(err.data.msg)
							})
						}
					}
				})
			},
			goPage(page) {
				if (page == 'logout') {
					this.logout()
				} else {
					uni.navigateTo({
						url: page
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	page{
		background: #F3F5F9;
	}
	.top_box_img{
		width: 100%;
		height: 35vh;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.top_box_img_text{
			position: absolute;
			top: 2vh;
			left: 4%;
			width: 92%;
		}
		.setup {
			position: absolute;
			top: 3.5vh;
			right: 0;
		}
		.info {
			height: 14vh;
			padding-top: 4vh;
		}
		.top_box_img_text_atar{
			width: 10vh;
			height: 10vh;
			border-radius: 100%;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.top_num{
			color: #A0BDFF;
		}
		.top_box_img_text_but{
			height: 8vh;
			margin: 2vh 30rpx;
		}
		.top_box_img_text_lin{
			width: 2rpx;
			height: 38rpx;
			background: #EFF2F7;
			opacity: 0.2;
		}
	}
	.con {
		width: 100%;
		padding: 0 4% 40rpx;
		position: absolute;
		top: 28vh;
		left: 0;
	}
	.con_box{
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.con_box_item{
		padding: 30rpx 0;
		margin: 0 30rpx;
		
		image{
			width: 33rpx;
			height: 35rpx;
		}
		
		
	}
</style>
